03 - Les hyperliens

Hyperliens

Un hyperlien (ou lien hypertexte) est un texte cliquable faisant référence à une autre page web (ou ressource), permettant de se rendre dessus.

Ne pas confondre hyperlien, qui est un élément cliquable, avec URL qui est l'adresse d'une page

Un lien est composé d'un texte et d'une adresse cible :

            
                <a href="https://xxxxx">Texte cliquable</a>
            
        

L'attribut href permet de paramétrer sur quelle page le lien emmènera.

Liens absolus et liens relatifs

Il existe deux types de liens : les liens absolus et les liens relatifs.

• Les liens absolus sont paramétrés avec une adresse URL complète, avec le protocole (https par exemple) et le nom de domaine :

                      
                          <!-- Lien absolu avec protocole et nom de domaine -->
                          <a href="https://monsite.fr/pages/index.html">Mon site</a>
                      
                  

• Les liens relatifs sont spécifiés sans protocole et nom de domaine, ils seront construits par rapport à la page actuelle :

                      
                          <!-- Ce lien emmènera sur la page contact.html, située au même endroit que l'URL actuelle où se trouve le navigateur.
   Si par exemple on est actuellement sur la page "https://monsite.fr/pages/index.html", ce lien nous emmènera sur la page "https://monsite.fr/pages/contact.html" -->
                          <a href="contact.html">Page de contact</a>
  
                          <!-- la partie "../" indique que l'on remonte d'un cran dans l'arborescence par rapport à l'URL actuelle.
   Si par exemple on est actuellement sur la page "https://monsite.fr/pages/index.html", ce lien nous emmènera sur la page "https://monsite.fr/profil.html" -->
                          <a href="../profil.html">Page de profil</a>
  
                          <!-- Ce lien est un lien relatif à la racine du site actuel 
  (le / au début est très important car il signifie "en partant du début de l'url actuelle", appelé aussi "racine")
   Si par exemple on est actuellement sur la page "https://monsite.fr/a/b/c/d/index.html", ce lien nous emmènera sur la page "https://monsite.fr/pages/index.html" -->
                          <a href="/pages/index.html">Mon site</a>
                      
                  

Les ancres

Dans une page HTML, une ancre est un lien permettant de se rendre à un endroit précis. Pour créer une ancre, il faut que l'élément cible soit pourvu d'un attribut "id", qui doit être unique sur toute la page (il ne peut y avoir 2 éléments avec le même id dans la même page).

            
                <!-- Le # est important pour que ça soit bien un lien vers une ancre -->
                <a href="#chats">Se rendre au paragraphe sur les chats</a>

                <h2 id="chats">Les chats mangent les souris</h2>
                <p>Lorem ipsum ...</p>
            
        

Quand un lien avec une ancre est cliqué, automatiquement la fenêtre du navigateur va se positionner au niveau de l'élément ayant le même id que l'ancre.

L'ancre se rajoute aussi en haut dans la barre d'URL à la fin.

Un lien peut aussi emmener sur une ancre d'une autre page :

            
                <a href="https://xxxxxxx/index.html#blabla">Aller sur une partie précise (ancre) d'une autre page</a>
            
        

Provoquer l'ouverture dans un nouvel onglet

Il est possible de forcer l'ouverture d'un lien dans un nouvel onglet en rajoutant un attribut target :

            
                <a href="https://www.google.fr" target="_blank">Google</a>
            
        

Utiliser un protocole différent

Les hyperliens peuvent aussi être utilisés pour appeler d'autres protocoles que http et https. Quelques exemples :

            
                <!-- Lien sur une adresse email pour ouvrir le logiciel de messagerie de la machine pour envoyer un email à l'adresse renseignée -->
                <a href="mailto:test@exemple.com">test@exemple.com</a>

                <!-- Lien sur un numéro de téléphone pour ouvrir le logiciel d'appel de la machine (très pratique sur smartphone) -->
                <a href="tel:+33600000000">Appeler le +33600000000</a>
            
        

Accessibilité des liens

Si un lien n'est pas explicitement compréhensible, il faut lui ajouter l'attribut title qui permettra d'ajouter l'information sémantique manquante. Exemples :

            
                <a title="Aller sur le site de Google" href="https://www.google.fr">https://www.google.fr</a>

                <a title="En savoir plus sur les chats" href="https://fr.wikipedia.org/wiki/Chat">En savoir plus</a>
            
        

Créer une image-lien

Une image lien est une image qui sert de lien tout simplement :

            
                <a href="https://fr.wikipedia.org/wiki/Chat">
                    <img src="chat.jpg" alt="Aller sur la page Wikipédia des chats">
                </a>
            
        

Attention à l'accessibilité : une image-lien DOIT toujours avoir un alt indiquant exactement ce que fait ce lien !